import React, {Component} from 'react';
import {View, ImageBackground, StyleSheet,Text,Image} from "react-native";
import Swiper from 'react-native-deck-swiper';

import Header from '../../components/header.js'
import {pxToDp} from "../../utils/styleKits";
import ThButton from "../../components/THButton";

class Index extends Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#fff', position:'relative'}}>
        <Header title={'测灵魂'}/>

        <ImageBackground source={require('../../images/testsoul_bg.png')} style={styles.bg} imageStyle={{height: '100%'}}>
          <Swiper
            cardVerticalMargin={pxToDp(5)}
            horizontalSwipe={false}
            verticalSwipe={false}
            cards={['0']}
            renderCard={(card) => {
              return (
                <View style={styles.card}>
                  <Image source={require('../../images/1.png')} style={styles.soulImg}/>
                </View>
              )
            }}
            cardIndex={0}
            backgroundColor={'transparent'}
            stackSize= {1}>
          </Swiper>
        </ImageBackground>

        <ThButton style={{
          width: '60%',
          height: pxToDp(50),
          position: 'absolute',
          bottom: pxToDp(30),
          alignSelf: 'center',
          borderRadius: pxToDp(5),
          overflow: 'hidden'
        }} onPress={()=>this.props.navigation.push('testQa')}
        >开始测试</ThButton>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bg: {
    width: '100%',
    height: '50%',
  },

  // swiper
  card: {
    height: '70%',
    borderRadius: 4,
    borderWidth: 2,
    borderColor: "#E8E8E8",
    justifyContent: "center",
    backgroundColor: "white"
  },
  soulImg: {
    width: '100%',
    height: '100%',
  }
});

export default Index;